<template>
  <ListTable
    @getData="handleCallback"
    v-model="columns"
    :total
    :dataList="userList"
    placeholder="用户名"
  >
    <template #select>
      <n-select
        clearable
        placeholder="状态"
        v-model:value="selectStatus"
        :options="statusOptions"
      />
      <n-select
        clearable
        placeholder="偏好"
        v-model:value="selectHobby"
        multiple
        :options="hobbyOptions"
      />
    </template>
  </ListTable>
</template>

<script setup lang="ts">
import { createVNode } from 'vue'
import { getUserList, banUser } from '@/api'
import { NButton, NTag, NAvatar } from 'naive-ui'
import { USER_AVATAR } from '@/constant'
import { debounce, mapToLabelValue, updateParams } from '@/utils'
import { PARAMS, SCENIC_TYPE } from '@/constant'

import ListTable from '@/components/ListTable.vue'

const message = useMessage()

let params = PARAMS

const type_hobby = SCENIC_TYPE
const hobbyOptions = mapToLabelValue(type_hobby)
const selectHobby = ref([])

watch(selectHobby, async val => {
  params = updateParams(params, 'hobby', val.join('|'))
  await getData(params)
})

const status = {
  0: '正常',
  1: '禁言中'
}
const statusOptions = mapToLabelValue(status)
const selectStatus = ref(null)

watch(selectStatus, async val => {
  params = updateParams(params, 'status', val && +val)
  await getData(params)
})

const total = ref(0)
const userList = ref([])
const getData = async (
  params = {
    pageNum: 1,
    pageSize: 10
  }
) => {
  const { total: count, list } = await getUserList(params)
  total.value = count
  userList.value = list
}

await getData()

const changeStatus = async id => {
  const res = await banUser(id)
  res && message.success(res)
  await getData(params)
}

const createColumns = (): DataTableColumns<any> => {
  return [
    {
      title: '#',
      render(row, index) {
        return index
      }
    },
    {
      title: '头像',
      render(row) {
        return createVNode(NAvatar, {
          round: true,
          size: 'medium',
          src: row.avatar,
          fallbackSrc: USER_AVATAR
        })
      }
    },
    {
      title: '用户名',
      ellipsis: {
        tooltip: true
      },
      render(row) {
        return row.username
      }
    },
    {
      title: '手机号',
      ellipsis: {
        tooltip: true
      },
      render(row) {
        return row.phone
      }
    },
    {
      title: '所在地区',
      ellipsis: {
        tooltip: true
      },
      render: row => row.area || '-'
    },
    {
      title: '偏好',
      ellipsis: {
        tooltip: true
      },
      render: row => {
        if (!row.hobby) return '-'
        const hobbyArr = row.hobby.split('|')
        return hobbyArr.map(item => type_hobby[item]).join('、')
      }
    },
    {
      title: '状态',
      render(row) {
        return createVNode(
          NTag,
          {
            size: 'small',
            bordered: false,
            type: row.status === 0 ? 'success' : 'error'
          },
          () => (row.status === 0 ? '正常' : '禁言中')
        )
      }
    },
    {
      title: '操作',
      render(row) {
        return createVNode(
          NButton,
          {
            text: true,
            type: row.status === 0 ? 'error' : 'success',
            onClick: debounce(() => changeStatus(row.id))
          },
          () => (row.status === 0 ? '禁言' : '恢复')
        )
      }
    }
  ]
}
const columns = ref(createColumns())

const handleCallback = async (val: any) => {
  params.pageNum = val.pageNum
  params = updateParams(params, 'username', val.keyword)
  await getData(params)
}
</script>

<style scoped lang="scss"></style>
